<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
<!DOCTYPE html>
<head>
    <title>我的订单</title>
    <!--CSS styles-->
    <link rel="stylesheet" href="${path}/pet/home/css/linear-icons.css" />
    <link rel="stylesheet" href="${path}/pet/home/css/nav.css" />
    <link rel="stylesheet" href="${path}/pet/user/css/main.css">
    <link rel="stylesheet" href="${path}/pet/home/css/bootstrap.min.css">
    <link rel="stylesheet" href="${path}/pet/shoppingcart/css/orders.css">
    <!--JS files-->
    <script src="${path}/pet/home/js/jquery.min.js"></script>
    <script src="${path}/pet/home/js/nav.js"></script>
    <script src="${path}/pet/user/js/bootstrap.min.js"></script>
</head>

<body>
<nav class="navbar-fixed">
    <div class="container">
        <div class="navigation navigation-main">
            <a href="" class="logo"><img src="${path}/pet/home/assets/images/logo.jpg" alt="" /></a>
            <a href="#" class="open-menu"><i class="icon icon-menu"></i></a>
            <div class="floating-menu">
                <div class="close-menu-wrapper">
                    <span class="close-menu"><i class="icon icon-cross"></i></span>
                </div>
                <ul>
                    <li id="exitlogin2"><a>退出登录</a></li>
                    <li><a href="${path}/home">首页</a></li>
                    <li><a href="${path}/chat">社交<span id="badge"></span></a></li>
                    <li><a href="${path}/chat?role=kf">客服</a></li>
                    <li><a href="${path}/myAccount">我的</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>
<section class="main-header" style="background-image:url(${path}/pet/home/assets/images/gallery-3.jpg)">
    <header>
        <div class="container">
            <h1 class="h2 title">宠物医疗保险</h1>
        </div>
    </header>
</section>

<section class="aui-flexView" style="max-width: 1200px;">
    <section class="aui-scrollView1">
        <div class="aui-tab" style="margin-top: 20px;" data-ydui-tab>
            <ul class="tab-nav">
                <li class="tab-nav-item all_btn">
                    <a id="all_btn" class="active" href="#all" data-toggle="tab">全部</a>
                </li>
                <li class="tab-nav-item pending_btn">
                    <a id="pending_btn" class="active" href="#pending" data-toggle="tab">待处理</a>
                </li>
                <li class="tab-nav-item complete_btn">
                    <a id="complete_btn" class="active" href="#complete" data-toggle="tab">已完成</a>
                </li>
                <li class="tab-nav-item remove_btn">
                    <a id="remove_btn" class="active" href="#remove" data-toggle="tab">已退款</a>
                </li>
            </ul>
            <div class="divHeight"></div>
            <div class="tab-content">
                <div class="tab-pane fade show active" id="all" role="tabpanel"></div>
                <div class="tab-pane fade show active" id="pending" role="tabpanel"></div>
                <div class="tab-pane fade show active" id="complete" role="tabpanel"></div>
                <div class="tab-pane fade show active" id="remove" role="tabpanel"></div>
            </div>
        </div>
    </section>
</section>
</body>

<script>
    $(document).ready(function(){
        var user="<%=session.getAttribute("user")%>";
        var uid = ${user.id};

        $("#exitlogin2").click(function(){
            var username = "${user.username}";
            $.ajax({
                type: 'POST',
                url: '/user/logout',
                dataType: "json",
                data: {username:username},
                error: function () {
                    console.log("失败");
                },
                success: function (data) {
                    alert("已退出账号，如有需要，请重新登录");
                    window.location.href = '${path}/home';
                }
            });
        });


        $.ajax({
            url: '/message/longSearch',
            data: {uid:uid},
            dataType:'json',
            type: 'POST',
            success: function (result) {
                var num = result.好友请求的数目 + result.好友拒绝的数目 +result.未读消息数目;
                $("#badge").html(num);
            }
        });

        setInterval(function(){
            $.ajax({
                url: '/message/longSearch',
                data: {uid:uid},
                dataType:'json',
                type: 'POST',
                success: function (result) {
                    var num = result.好友请求的数目 + result.好友拒绝的数目 +result.未读消息数目;
                    $("#badge").html(num);
                }
            });
        }, 5000);


        $('#all').load('${path}/allOrders');
        $("#all_btn").addClass("test");
        $("#all_btn").click(function(){
            $('#all').load('${path}/allOrders');
            $("#all").addClass("active");
            $("#pending").removeClass("active");
            $("#complete").removeClass("active");
            $("#remove").removeClass("active");
            $("#all_btn").addClass("test");
            $("#pending_btn").removeClass("test");
            $("#complete_btn").removeClass("test");
            $("#remove_btn").removeClass("test");
        });
        $("#pending_btn").click(function(){
            $('#pending').load('${path}/pendingOrders');
            $("#pending").addClass("active");
            $("#all").removeClass("active");
            $("#complete").removeClass("active");
            $("#remove").removeClass("active");
            $("#pending_btn").addClass("test");
            $("#all_btn").removeClass("test");
            $("#complete_btn").removeClass("test");
            $("#remove_btn").removeClass("test");
        });
        $("#complete_btn").click(function(){
            $('#complete').load('${path}/completeOrders');
            $("#complete").addClass("active");
            $("#all").removeClass("active");
            $("#pending").removeClass("active");
            $("#remove").removeClass("active");
            $("#complete_btn").addClass("test");
            $("#pending_btn").removeClass("test");
            $("#all_btn").removeClass("test");
            $("#remove_btn").removeClass("test");
        });
        $("#remove_btn").click(function(){
            $('#remove').load('${path}/cancelOrders');
            $("#remove").addClass("active");
            $("#all").removeClass("active");
            $("#pending").removeClass("active");
            $("#complete").removeClass("active");
            $("#remove_btn").addClass("test");
            $("#pending_btn").removeClass("test");
            $("#complete_btn").removeClass("test");
            $("#all_btn").removeClass("test");
        });
    });
</script>

<style>
    .show {
        overflow-x: auto;
        border: 1px solid #ebebeb;
    }
    .test {
        color: #FFFFFF !important;
        background-color: #3D608F;
    }
    .aui-scrollView1 {
        width: 100%;
        height: 100%;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        /* overflow-y: auto; */
        /* overflow-x: hidden; */
        -webkit-overflow-scrolling: touch;
        position: relative;
        margin-top: -44px;
    }
    #badge {
        padding: 2px 5px;  /* 不需要定义height与width，添加合适的padding使圆圈随字符长短变化而改变 */
        line-height: 20px;
        text-align: center;
        background-color: red;
        color: white;
        font-size: 12px;
        font-weight: 700;
        border-radius: 50%;
        /*position: relative;*/
        /*bottom: 45px;*/
        /*left: -20px;*/
    }
</style>

</html>
